<template>
  <div class="dataModule">
    <div class="headerFilterBox" style="margin-bottom: 10px">
      <div style="margin: 0 10px">
        <ErpTimePicker
          :timeValue="filterConfig.timeList"
          @handlerTimeChange="handlerTimeChange"
          type="daterange"
        />
      </div>
      <ErpSearchButton
        @searchTable="searchTable"
      ></ErpSearchButton>
    </div>
    <el-scrollbar height="calc(100vh - 220px)">
      <div>
        <div class="numStatisticsBox">
          <div>
            <span>新增访客数</span>
            <div class="num">0</div>
          </div>
          <div>
            <span>新增评论数</span>
            <div class="num">0</div>
          </div>
          <div>
            <span>新增开口数</span>
            <div class="num">0</div>
          </div>
          <div>
            <span>新增客资数</span>
            <div class="num">0</div>
          </div>
          <div>
            <span>开口率</span>
            <div class="num">0%</div>
          </div>
          <div>
            <span>客资转化率</span>
            <div class="num">0%</div>
          </div>
        </div>
      </div>
      <LineBox></LineBox>
      <el-table :data="tableConfig.data"  size="small"
                class="tableClass"
                style="width: 100%;"
                border
                :header-cell-style="{ background: '#f4f4f4', color: '#000' }"
      >
        <el-table-column prop="k1" label="时段"  />
        <el-table-column prop="k2" label="新增访客数"  ></el-table-column>
        <el-table-column prop="k3" label="新增评论数" />
        <el-table-column prop="k4" label="新增开口数" />
        <el-table-column prop="k5" label="新增客资数" />
        <el-table-column prop="k6" label="开口率" ></el-table-column>
        <el-table-column prop="k5" label="客资转化率" />
      </el-table>
    </el-scrollbar>
  </div>
</template>

<script setup>
import {reactive, onMounted, ref} from 'vue'
import ErpTimePicker from "@/components/erp-time-picker-v3/erp-time-picker-v3"
import ErpSearchButton from "@/components/erp-search-button/erp-search-button"
import {curEndTime, curStartTime} from "@/utils/d_times"
import LineBox from "./line/line"
const filterConfig = reactive({
  timeList: [],
  searchKey: ""
})
const tableConfig = reactive({
  data: [
    {k1:"0", k2:"0", k3: "0",  k4: "0",   k5: "0", k6: "0"}
  ],
  loading: false,
  pageSize: 50,
  pageNum: 1,
  total: 0,
  headerList:[]
})
onMounted(() => {
  init()
})
const init = () => {
  const startTime = curStartTime()
  const endTime = curEndTime()
  filterConfig.timeList = [startTime, endTime]
}
const handlerTimeChange = (time) => {
  filterConfig.timeList = time
}
const searchTable = (data) => {
  if(data){
    filterConfig.timeList = data
  }
}
const getTableList = () => {

}
const handleCurrentChange = (num) => {
  tableConfig.pageNum = num
  getTableList()
}
const handleSizeChange = (num) => {
  tableConfig.pageSize = num
  getTableList()
}
</script>

<style scoped lang="scss">
.numStatisticsBox {
  display: flex;
  align-items: center;
  justify-content: space-between;
  &>div{
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  span {
    color: #969696;
    font-size: 13px;
  }
  .num {
    font-size: 18px;
    margin: 10px 0px;

  }
}
.btnItem{
  width: 80px;
  color: #fff;
  text-align: center;
  background: #0099e8;
}
.erp-order-footer{
  width: 100%;
  margin-top: 10px;
  display: flex;
  justify-content: flex-end;
}
</style>